<template>
	<view class="">
		<view class="">
			<seckill-scroll-tabs v-model="tabIndex" :tabs="tabs" :showBar="false" :tab-width="180" @change="change"></seckill-scroll-tabs>
			<view class="u-p-x-20">
				<view class="u-p-t-20 ">
					<view class="u-p-20 bg-white rounded-10">
						<text class="flex u-p-x-10 u-font-28">热门抢购</text>
						<scroll-view class="u-m-t-20" scroll-x="true" >
							<view class="flex flex-nowrap">
								<block v-for="(item,index) in hotGoodsList" :key="index">
									<view class="flex flex-column align-center u-p-x-20" @click="toSeckill(item)">
										<u-image :src="item.goods_image" width="130rpx" height="130rpx" borderRadius="8"></u-image>
										<text class="u-m-t-20">¥{{item.price}}</text>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
				</view>
				
				<view class="u-p-t-20 ">
					<view class="flex u-p-20 bg-white u-m-b-20 rounded-10" v-for="(item,index) in goodsList" :key="index" @click="toSeckill(item)">
						<u-image :src="item.goods_image" width="150rpx" height="150rpx"></u-image>
						<view class="flex-1 flex flex-column justify-between ">
							<view class="flex align-center">
								<view class="flex-1 flex flex-column justify-between u-p-x-20">
									<view class="" style="height: 50rpx;">
										<text class="text-ellipsis-2">{{item.goods_name}}</text>
									</view>
									<view class="u-p-t-25">
										<text class="u-font-26 u-p-r-20">¥{{item.price}}</text>
										<text class="text-greey text-through">¥{{item.line_price}}</text>
									</view>
								</view>
								<view class="" @click.stop="buyNow(item.id)">
									<u-tag text="立即抢购" mode="dark" shape="circle" bgColor="#ff9001" ></u-tag>
								</view>
							</view>
							<view class="flex align-center ">
								<view class="u-p-x-20" style="width: 370rpx;">
									<u-line-progress striped activeColor="#ff6c25" inactiveColor="#fff0e9" :percent="item.process<15?item.formartValue:item.process" height="30">
										<text>{{item.process}}%</text>
									</u-line-progress>
								</view>
								<text class="flex-1 text-greey text-center">已售{{item.seckill_num}}件</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { SeckillCenterApi } from '@/api/serves.js'
	// import { seckillApi } from '@/api/seckillAjax.js'
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(80deg, #FF544F 0%, #FAD126 100%)',
					color: '#fff',
					width: '154rpx'
				},
				tabs: [],
				tabIndex: 0 ,// 当前tab的下标
				goodsList: [],
				hotGoodsList: [],
				room_id: '',
				percent: '',
			}
		},
		onLoad() {
			this._initData()
		},
		methods: {
			_initData() {
				this._getCalendar() // 秒杀专场
			},
			_getCalendar() {
				this.$ShowLoading()
				SeckillCenterApi.getCalendar().then(res=>{
				  console.log('秒杀专场',res)
					this.$HideLoading()
				  if(res.code==1){
				    this.tabs = res.data.rooms
						this.room_id = this.tabs[0].id
						this._getRoomGoods(this.tabs[0].id)
						this._getHotGoods(this.tabs[0].id)
				  }
				})
			},
			_getRoomGoods(id) {
				if(!id) return
				SeckillCenterApi.getRoomGoods({room_id: id}).then(res=>{
				  console.log('秒杀专场商品',res)
					this.$HideLoading()
				  if(res.code==1){
						this.goodsList = res.data
						this.goodsList.forEach(v=> {
							v.formartValue = v.process<15? 15: v.process
						})
				  }
				})
			},
			_getHotGoods(id) {
				if(!id) return
				SeckillCenterApi.getHotGoods({room_id: id}).then(res=>{
				  console.log('热门秒杀专场商品',res)
					this.$HideLoading()
				  if(res.code==1){
						this.hotGoodsList = res.data
				  }
				})
			},
			toSeckill(item) {
				let params = {
					id: item.id,
					room_id: this.room_id,
					goods_id: item.goods_id
				}
				uni.navigateTo({
					url: '/pages/seckill/seckillGoodsDetail/seckillGoodsDetail?info=' + JSON.stringify(params)
				})
			},
			change(i) {
				console.log(i);
				this.room_id = this.tabs[i].id
				this._getRoomGoods(this.tabs[i].id)
				this._getHotGoods(this.tabs[i].id)
			},
			formartPercent(num) {
				console.log(44);
				this.percent = num
				if(num<20) {
					return 20
				}
				return num
			},
			buyNow(id) {
				this.$ShowLoading()
				SeckillCenterApi.goodsSeckill({ room_id: this.room_id, id }).then(res => {
				  console.log('立即抢购', res);
					this.$HideLoading()
				  if(res.code == 1){
						setTimeout(()=> {
							this.$Toast(res.msg)
							uni.navigateTo({
								url: '/pages/seckill/seckillMine/seckillMine'
							})
						}, 500)
				  }else {
						this.$Toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
